<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Aexp GUI</title>
        <link rel="stylesheet" type="text/css" href="css/amex.mbt.main.min.cssgz">
        <link rel="stylesheet" type="text/css" href="gray/easyui.css">
        <link rel="stylesheet" type="text/css" href="css/icon.css">
        <link rel="stylesheet" type="text/css" href="css/checkbox.css">
        <link rel="stylesheet" type="text/css" href="css/timer.css">
        <link rel="stylesheet" type="text/css" href="css/newstabs.css">

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/jquery.portal.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/highchart.js"></script>
        <script type="text/javascript" src="js/exporting.js"></script>
        <script type="text/javascript" src="js/highcharts-more.js"></script>
        <script type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
        <script type="text/javascript" src="js/datagrid-filter.js"></script>
        <script type="text/javascript" src="js/jquery.tabso_yeso.js"></script>
        <script type="text/javascript" src="js/myself.js"></script>
        <script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>

        <style type="text/css">
            .title {
                font-size: 16px;
                font-weight: bold;
                padding: 20px 10px;
                background: #eee;
                overflow: hidden;
                border-bottom: 1px solid #ccc;
            }
            .t-list {
                padding: 3.1px;
            }
            
         .slide-out-div {
            padding: 20px;
            width: 250px;
            background: #f2f2f2;
            border: #29216d 2px solid;
        }
        </style>
    
        <script type="text/javascript">
            $("document").ready(function(){
            	
            	//loading the portal framework
            	 $('#pp').portal({
                    border : false,
                    fit : true
                });
                //set checkbox default as checked
                $(":checkbox").attr("checked",true);
                //if checkbox is unchecked, then panel should be closed
                //check or uncheck checkbox to open or close panel
                $(":checkbox").click(function(){
                    //alert("panel Id dfdf");
                    var panelId = $(this).attr("cor");
                    if(this.checked){
                        $("#" + panelId).panel('open');
                    }else{
                        $("#" + panelId).panel('close');
                    }
            
                });//set checkbox default as checked
                //if checkbox is unchecked, then panel should be closed
                
                //Configure Home
                $("#btnConfgHome").click(
                    function(){
                        $('#dlg_config_home').dialog('open');
                    }  
                );
                //timer count down
                $("#countdown_dashboard").countDown({
                    targetOffset: {
                        'min':      30,
                        'sec':      0
                    }, 
                    onComplete: function() { 
                        alert("Time Out! Please login again!");
                        //remove();
                    }
                });
                 //slider
	            $("#move-animate-left").tabso({
	                cntSelect:"#leftcon",
	                tabEvent:"mouseover",
	                tabStyle:"move-animate",
	                direction : "left"
	            });
	            
	            $("#refresh").click(function(){
	            	location.reload();
	            });
            });
            /*
            function remove() {
                $('#pp').portal('remove', $('#pgrid'));
                $('#pp').portal('resize');
            }
            */
         
            function demo(val){
            	var pId = $(val).attr("id");
            	//alert(pId);
            	if(pId=="pgrid"){
            		//alert("testing or not");
            		var cekBox = $("input[cor='pgrid']");
            		$(cekBox).attr("checked",false);
            	}else if(pId=="pnlANA"){
            		var cekBox = $("input[cor='pnlANA']");
                    $(cekBox).attr("checked",false);
            	}else if(pId=="pnlSdSmy"){
                    var cekBox = $("input[cor='pnlSdSmy']");
                    $(cekBox).attr("checked",false);
                }else if(pId=="policySv"){
                    var cekBox = $("input[cor='policySv']");
                    $(cekBox).attr("checked",false);
                }else if(pId=="pnlTopAirCrs"){
                    var cekBox = $("input[cor='pnlTopAirCrs']");
                    $(cekBox).attr("checked",false);
                }else if(pId=="pnlAirSpd"){
                    var cekBox = $("input[cor='pnlAirSpd']");
                    $(cekBox).attr("checked",false);
                }else if(pId=="pnlPlySts"){
                    var cekBox = $("input[cor='pnlPlySts']");
                    $(cekBox).attr("checked",false);
                }
            	
            }
            function formatPrice(val,row){
            if (val < 30){
                return '<div style="margin-left:18px;margin-top:2px; float:left;color:red;">'+val+'%</div><div style="margin-left: 6px;margin-top:6px; border:#f15b6c solid 1px; width:6px;height:6px; float:left;border-radius:3px; background-color:red;" class="easyui-tooltip" title="value<30%"></div>';
	            } 
	            else if(val>30 && val<70){
	                return '<div style="margin-left:18px;margin-top:2px; float:left;color:#f15b6c;">'+val+'%</div><div style="margin-left: 6px;margin-top:6px; border:#f15b6c solid 1px; width:6px;height:6px; float:left;border-radius:3px; background-color:#f15b6c;" class="easyui-tooltip" title="30%<=value<70%" ></div>';
	            }else if(val>=70 && val<=100){
	                return '<div style="margin-left:18px;margin-top:2px; float:left;color:#7fb80e;">'+val+'%</div><div style="margin-left: 6px;margin-top:6px; border:#7fb80e solid 1px; width:6px;height:6px; float:left;border-radius:3px; background-color:#7fb80e;" class="easyui-tooltip" title="value>=70%"></div>';
	            }
            }
            var data = [
                {"productid":"FI-SW","status":"P","itemid":"EST-1"},
	            {"productid":"RP-SN","status":"P","itemid":"EST-11"},
	            {"productid":"RP-SN","status":"P","itemid":"EST-12"},
	            {"productid":"RP-LI","status":"P","itemid":"EST-13"},
	        ];
        </script>
        
         <script>
         $(function(){
             $('.slide-out-div').tabSlideOut({
                 tabHandle: '.handle',                              //class of the element that will be your tab
                 pathToTabImage: 'contact_tab.gif',          //path to the image for the tab *required*
                 imageHeight: '60px',                               //height of tab image *required*
                 imageWidth: '20px',                               //width of tab image *required*    
                 tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                 speed: 300,                                        //speed of animation
                 action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                 topPos: '200px',                                   //position from the top
                 fixedPosition: false,                               //options: true makes it stick(fixed position) on scroll
                 onLoadSlideOut: true
             });
         });

         </script>
    </head>
    <body class="easyui-layout">
    	
    	<!--============================tutorial start==============================-->
        <div id="tutorial" class="tutorial" style="top: 0px;" tabindex="3">
        <table width="100%" border="0" cellspacing="0">
            <tbody><tr class="tutorialHeader" style="height: 40px;">
                <td width="60%" align="center" scope="row">
                    <span class="tutorialHeaderLabel">
                        How it works</span>
                </td>
                <td width="40%" align="center">
                    <span id="closeTutorialLbl" class="closeTutorial" title="Select to close" tabindex="4">x</span>
                </td>
            </tr>
            <tr class="tutorialDivider">
                <td colspan="2" scope="row">
                </td>
            </tr>
            <tr class="tutorialMessage">
                <td colspan="2" class="tutorialMessageHolder" valign="top" align="center" scope="row">
                    <img title="Tutorial Info" alt="" src="icons/img-tutorial-info.png" id="tutorialIMG" height="400" width="947">
                </td>
            </tr>
        </tbody></table>
    </div>
    
    <!--=============================tutorial end======================================-->
    
    
   
    
    
        <div region="north" class="title" border="false" style="height:60px;">
        	<div style="margin-top:-6px;float: left;"><a href="http://www.americanexpress.com" title="American Express US: homepage" target="_blank"><img src="icons/aexp.png" /></a></div>
            <div id="countdown_dashboard" style="float: right">
                <div class="dash minutes_dash">
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>	
        	</div>
        	<div style="float: right; margin-top: -5px;">
                <a href="#" class="easyui-linkbutton" onclick="$('#w').window('open')" data-options="plain:true,iconCls:'icon-cancel'">Configure Home</a>
                <a id="refresh" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Refresh</a>
               
                <a href="#" class="easyui-linkbutton" onclick="window.print()" data-options="plain:true,iconCls:'icon-print'">Print</a>
            </div>
            
            <!--wSpendPanels start-->
            <div id="wSpendPanel" class="easyui-window" title="Spend Panels" data-options="modal:true,closed:true,resizable:false,iconCls:'icon-save'" style="width:714px;height:616px;">
            	<div id="spendpanel" class="barChart2" style="width:700px;height:300px;"></div>
            	<!--=========================datagrid for Spend Panels Barchart start=======================-->
            	<table id="dg" title="Spend Panels(Summary)" style="width:700px;height:280px;" data-options="
                    singleSelect:true,
                    pagination:true,
                    data:data
                   
                ">
                    <thead>
                    <tr>
                        <th data-options="field:'itemid',width:80">Item ID</th>
                        <th data-options="field:'productid',width:100">Product</th>
                        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                        <th data-options="field:'attr1',width:250">Attribute</th>
                        <th data-options="field:'status',width:60,align:'center'">Status</th>
                    </tr>
                    </thead>
                </table>
                <script type="text/javascript">
                
			        var data = [
			            {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
			            {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
			            {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
			            {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"N","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
			            {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"N","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
			            {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
			            {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}
			        ];
			        
			        $(function(){
			            var dg = $('#dg').datagrid();
			            dg.datagrid('enableFilter', [{
			                field:'listprice',
			                type:'numberbox',
			                options:{precision:1},
			                op:['equal','notequal','less','greater']
			            },{
			                field:'unitcost',
			                type:'numberbox',
			                options:{precision:1},
			                op:['equal','notequal','less','greater']
			            },{
			                field:'status',
			                type:'combobox',
			                options:{
			                    panelHeight:'auto',
			                    data:[{value:'',text:'All'},{value:'P',text:'P'},{value:'N',text:'N'}],
			                    onChange:function(value){
			                        if (value == ''){
			                            dg.datagrid('removeFilterRule', 'status');
			                        } else {
			                            dg.datagrid('addFilterRule', {
			                                field: 'status',
			                                op: 'equal',
			                                value: value
			                            });
			                        }
			                        dg.datagrid('doFilter');
			                    }
			                }
			            }]);
			        });
                </script>
            	<!--=========================datagrid for Spend Panels Barchart end=======================-->
            </div>
            <!--wSpendPanels end-->
                        
            <div id="w" class="easyui-window" title="Configure Home" data-options="modal:true,closed:true,resizable:false,iconCls:'icon-save'" style="width:600px;height:500px;">
                <div class="easyui-tabs" data-options="tabWidth:112" style="width:500px;height:400px; font-family: Arial;" fit="true">
                    <div class="checkbox" title="Panels" style="padding:10px; font-family: Arial;">
	                    <input id="check1" type="checkbox" cor="pnlANA" name="check" value="check1" checked><label for="check1">News Alerts</label><br/>
			            <input id="check2" type="checkbox" cor="pnlSdSmy" name="check" value="check2" checked><label for="check2">Spend Summary</label><br/>
			            <input id="check3" type="checkbox" cor="policySv" name="check" value="check3" ><label for="check3">Policy Saving</label><br/>
			            <input id="check4" type="checkbox" cor="pgrid" name="check" value="check4" ><label for="check4">Data Grid</label><br/>
			            <input id="check5" type="checkbox" cor="pnlTopAirCrs" name="check" value="check5" ><label for="check5">Top Air Carriers</label><br/>
			            <input id="check6" type="checkbox" cor="pnlAirSpd" name="check" value="check6" ><label for="check6">Air Spend</label><br/>
			            <input id="check7" type="checkbox" cor="pnlPlySts" name="check" value="check7" ><label for="check7">Policy Status</label><br/>
                    </div>
			        <div title="General" style="padding:10px;">
			            <p>Maps Content.</p>
			        </div>
			        <div title="Targets" style="padding:10px">
			            <p>Journal Content.</p>
			        </div>
			        <div title="Post Travel" style="padding:10px">
			            <p>History Content.</p>
			        </div>
			        <div title="Pre travel" style="padding:10px">
			            <p>References Content.</p>
			        </div>
			        <div title="Contact" data-options="tabWidth:110" style="padding:10px">
			            <p>Contact Content.</p>
			        </div>
			    </div>
            </div>

            <div style="margin:10px 0;"></div>
        </div>
        <!--============================tutorial start==============================-->
        
    <!--tutorial end-->
        <div region="center" border="false">
            <div id="pp" style="position:relative">
                <div style="width:32.4%"; > 
                    <div id="pnlANA" class="pnlANA" title="Active News Alerts" collapsible="true" closable="true" style="height:250px; width: 100%;">
                    <!--===============================active news alerts start====================-->
                    <div class="demo">      
                        <ul class="tabbtn" id="move-animate-left">
                            <li class="current"><a href="http://news.yahoo.com/us/" target="_blank">U.S.</a></li>
                            <li><a href="http://news.yahoo.com/world/" target="_blank">WORLD</a></li>
                            <li><a href="http://news.yahoo.com/tech/" target="_blank">TECH</a></li>
                            <li><a href="http://sports.yahoo.com/" target="_blank">SPORTS</a></li>
                        </ul><!--tabbtn end-->
                        <div class="tabcon" id="leftcon">
                            <div class="subbox">
                                <div class="sublist">
                                    <ul>
				                        <li><span>▪</span><a href="http://news.yahoo.com/tips-for-jesus-143830076.html" target="_blank">Mystery 'Tips for Jesus' tipper identified in NYC</a></li>
				                        <li><span>▪</span><a href="http://news.yahoo.com/massive-winter-storm-wallops-texas--much-of-the-midwest-143009580.html" target="_blank">'Worst ice storm' in years wallops Texas, much of the Midwest </a></li>
				                        <li><span>▪</span><a href="http://news.yahoo.com/hillary--biden--they-d-both-be-great--obama-says-015137843.html" target="_blank">Hillary? Biden? They’d both be great, Obama says</a></li>
				                        <li><span>▪</span><a href="http://news.yahoo.com/fast-food-strikes-hit-nyc--%E2%80%98we-should-get-more-respect-232115668.html" target="_blank">Fast food strikes hit NYC: ‘We should get more respect’</a></li>
				                        <li><span>▪</span><a href="http://news.yahoo.com/newtown-biden-announces-more-mental-health-funding-110341187.html" target="_blank">Biden announces mental health push on eve of Newtown anniversary</a></li>
				                        <li><span>▪</span><a href="http://news.yahoo.com/cold-ice-grip-u-more-snow-blanket-east-010050461--finance.html" target="_blank">Snow blankets U.S. East; Washington offices, many schools closed</a></li>
				                    </ul>
                                </div><!--tabcon end-->
		                      <div class="sublist">
				                <ul>
				                    <li><span>▪</span><a href="http://ca.news.yahoo.com/egyptian-forces-arrest-qataris-al-jazeera-office-cairo-233505527.html" target="_blank">Egyptian forces arrest Qataris at Al Jazeera office in Cairo: report</a></li>
				                    <li><span>▪</span><a href="http://news.yahoo.com/no-grand-bargain-budget-deal-does-mean-economy-005106573.html" target="_blank">No ‘grand bargain’ in budget deal: What does that mean for the economy?</a></li>
				                    <li><span>▪</span><a href="http://news.yahoo.com/pope-francis-time-39-person-130549729.html" target="_blank">Pope Francis is Time's Person of the Year</a></li>
				                    <li><span>▪</span><a href="http://news.yahoo.com/brazil-gov-39-t-may-backtrack-auto-safety-224932865.html" target="_blank">Brazil gov't may backtrack on auto safety laws</a></li>
				                    <li><span>▪</span><a href="http://news.yahoo.com/39-happy-tears-39-africans-celebrate-mandela-39-214243450.html" target="_blank">'Happy tears' as S.Africans celebrate Mandela's life</a></li>
				                    <li><span>▪</span><a href="http://news.yahoo.com/north-korea-says-kim-39-uncle-removed-power-215418613.html" target="_blank">North Korea says Kim's uncle removed from power</a></li>
				                </ul>
		                    </div><!--tabcon end-->
				            <div class="sublist">
				                <ul>
				                    <li><span>▪</span><a href="http://news.yahoo.com/walmart-cut-iphone-5c-price-210445324.html" target="_blank">Walmart Will Cut The iPhone 5C Price On Friday To Just $27</a></li>
				                    <li><span>▪</span><a href="http://finance.yahoo.com/news/stay-safe-while-shopping-online-154547658.html" target="_blank">How to Stay Safe While Shopping Online</a></li>
				                    <li><span>▪</span><a href="http://www.forbes.com/sites/stevenbertoni/2013/12/11/paypal-predictions-your-wallets-days-are-numbered/?partner=yahootix" target="_blank">PayPal Predictions: Your Wallet's Days Are Numbered</a></li>
				                    <li><span>▪</span><a href="http://www.engadget.com/2013/12/10/nasa-valkyrie-robot/?ncid=rss_truncated" target="_blank">NASA's humanoid Valkyrie robot could lead the way to Mars (video)</a></li>
				                    <li><span>▪</span><a href="http://news.yahoo.com/could-smarty-ring-beat-smartwatch-192144939.html" target="_blank">Could the Smarty Ring Beat the Smartwatch?</a></li>
				                    <li><span>▪</span><a href="http://news.yahoo.com/sprint-ceo-forget-t-mobile-2014-time-shine-130529248.html" target="_blank">Sprint CEO: Forget T-Mobile, 2014 is our time to shine</a></li>
				                </ul>
				            </div><!--tabcon end-->
				            <div class="sublist">
				                <ul>
				                    <li><span>▪</span><a href="http://sports.yahoo.com/blogs/nfl-shutdown-corner/shutdown-corner-fixes-america-team-dallas-cowboys-172333788--nfl.html" target="_blank">Shutdown Corner fixes America’s Team: The Dallas Cowboys</a></li>
				                    <li><span>▪</span><a href="http://sports.yahoo.com/news/roethlisberger-ok-progress-despite-losses-202328912--nfl.html" target="_blank">Roethlisberger OK with progress despite losses</a></li>
				                    <li><span>▪</span><a href="http://sports.yahoo.com/news/elevator-company-cited-49ers-stadium-205921206--nfl.html" target="_blank">Elevator company cited in 49ers stadium death</a></li>
				                    <li><span>▪</span><a href="http://sports.yahoo.com/blogs/nba-ball-dont-lie/usher-losing-holiday-season-tanking-time-video-140054934--nba.html" target="_blank">Usher in the losing holiday season with ‘Tanking Time Is Here’ (Video)</a></li>
				                    <li><span>▪</span><a href="http://sports.yahoo.com/video/deandre-jordan-suffers-wardrobe-malfunction-081642559.html" target="_blank">DeAndre Jordan suffers wardrobe malfunction</a></li>
				                    <li><span>▪</span><a href="http://sports.yahoo.com/news/miami-coach-waiting-determine-wade-190224234--nba.html" target="_blank">Wade will play for Heat in showdown with Pacers</a></li>
				                </ul>
				            </div><!--tabcon end-->
                        </div><!--tabcon end-->
                    </div>      
                </div><!--tabbox end-->
                    <!--===============================active news alerts end====================-->
                    </div>
        
                    <div id="pnlPlySts" class="pnlPlySts" title="Policy Status" closable="true" collapsible="true" style="height:250px;text-align:center;padding:5px;">
                    <table class="easyui-datagrid" style="width:700px;height:auto;"
                        data-options="rownumbers:false,fit:true,border:false,singleSelect:false,iconCls:'icon-ok',url:'policystatus_data.json',method:'get'">
                        <thead>
                        <tr>
                            <th data-options="field:'indicatorId',width:163, align:'center'">Indicator</th>
                            <th data-options="field:'diId',width:135, align:'center'">Domestic/International</th>
                            <th data-options="field:'actualId',width:85,align:'center',formatter:formatPrice">Actual</th>
                        </tr>
                        </thead>
                    </table>
                    </div>
                     <div id="pgrid" class="pnlPGrid" title="Data Grid" collapsible="true" closable="true" style="height:250px;">
                    <table class="easyui-datagrid" style="width:650px;height:auto; font-family: Arial;" fit="true" border="false" singleSelect="true"
                    idField="itemid" url="datagrid_data.json">
                        <thead>
                            <tr>
                                <th field="itemid" width="60" align="center">Item ID</th>
                                <th field="productid" width="80" align="center">Product ID</th>
                                <th field="listprice" width="60" align="center">List Price</th>
                                <th field="unitcost" width="60" align="center">Unit Cost</th>
                                <th field="attr1" width="80"  align="center">Attribute</th>
                                <th field="status" width="50" align="center">Status</th>
                            </tr>
                        </thead>
                        </table>
                    </div>
                    
            </div>
            <div style="width:33%;">
                <div id="pnlSdSmy" class="pnlSdSmy" title="Spend Summary" collapsible="true" closable="true" style="color:red;text-align:center;height:250px;padding:5px;" ondblclick="$('#wSpendPanel').window('open')">
                    <div id="spendsummary" class="barChart2" style="height:90%; width: 95%;"></div>
                </div>
                <!--Top Air Carriers-->
                <div id="pnlTopAirCrs" class="pnlTopAirCrs" title="Top Air Carriers" closable="true" collapsible="true" style="height:250px;text-align:center;">
                        <div id="barChart1" class="barChart" style="height:92%; width: 95%;"></div>
                </div>
                </div>
                <div style="width:34%;font-family: Arial;">

                <div id="pnlAirSpd" class="pnlAirSpd" title="Air Spend" closable="true" collapsible="true" style="height:250px;text-align:center;padding:1px;">
                    <div id="barChart3" class="barChart" style="height:88%; width: 91%;"></div>
                </div>
                
                <div id="policySv" class="pnlPySv" title="Policy Savings" collapsible="true" closable="true" style="height:250px;text-align: center;padding:5px;">
                        <div id="barChart4" class="barChart" style="height:90%; width: 93%;"></div>
                </div>
                
                </div>
            </div>
        </div>
    <div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users">Content</a>
        <h3>Feedback</h3>
        <a href="#">XXX@gmail.com</a><br /><br />
        <p>This can be a form to submit feedback, or contact info</p>
    </div>
        <script type="text/javascript" src="./My Business Trends_files/jquery-1.9.1.min.jsgz"></script>
        <script type="text/javascript" src="amex.mbt.controller.min.jsgz"></script>
        <script type="text/javascript" src="jquery.jqplot.min.jsgz"></script>
        <script src="perfect-scrollbar-0.4.3.with-mousewheel.min.jsgz"></script>
        
    </body>
</html>